<template>
  <KView class="search-times-view">
    <KScrollView :scroll-x="true" :scroll-with-animation="true" :scroll-left="scrollLeft" class="search-times-view-data">
      <KView v-for="(times,index) in timesList" :key="`times_${index}`" class="search-times-view-item" :class="{'select':times===search.curTimes}"
        @click="itemClick(times)">
        <KView>{{$moment(times.startTime).format('HH:mm')}}</KView>
        <KView>{{times.dateText}}</KView>
        <KView class="search-times-view-status">
          <span>{{typeObj[times.type]}}</span>
        </KView>
      </KView>
    </KScrollView>
  </KView>
</template>

<script>
  import storeMixins from 'mixins/storeMixins';

  export default {
    mixins: [storeMixins],

    props: {
      search: {
        type: Object,
        required: true
      }
    },

    computed: {
      timesList() {
        return this.search.timesList;
      }
    },

    data() {
      return {
        isMiniprogram: process.env.isMiniprogram,
        scrollLeft: '0px',
        typeObj: {
          "0": "未开启",
          "1": "已开启",
          "2": "已结束"
        }
      };
    },

    mounted() {
      this.$nextTick(() => {
        setTimeout(() => {
          this.scrollLeft = this.getScrollLeft();
        }, 50);
      });
    },

    methods: {
      getScrollLeft() {
        let timesList = this.timesList;
        let curTimes = this.search.curTimes;
        let index = timesList.indexOf(curTimes);
        let left;
        if (index <= 1) {
          left = 0;
        } else {
          let len = timesList.length;
          if (index > len - 4) {
            index = len - 4;
          }
          index = index - 1;
          left = index * 145;
        }

        if (this.isMiniprogram) {
          let scrollLeftStr = left + 'rpx';
          if (scrollLeftStr === this.scrollLeft) {
            scrollLeftStr = (left - 1) + 'rpx';
          }
          return scrollLeftStr;
        }
        let scrollLeft = left * this.width / 750;
        scrollLeft = Math.round(scrollLeft);
        let scrollLeftStr = scrollLeft + 'px';
        if (scrollLeftStr === this.scrollLeft) {
          scrollLeftStr = scrollLeft - 0.3 + 'px';
        }
        return scrollLeftStr;
      },

      itemClick(times) {
        let search = this.search;
        if (search.curTimes === times) {
          return;
        }
        search.curTimes = times;
        this.scrollLeft = this.getScrollLeft();
        setTimeout(() => {
          this.$emit('search-data', times);
        }, 200);
      }
    }
  };

</script>

<style lang="scss">
  .search-times-view {
    height: 100%;
    background: #fd5a3a;
    padding: 0 formatPx(30);

    .search-times-view-data {
      height: 100%;
      white-space: nowrap;
      overflow: auto;

      .search-times-view-item {
        display: inline-block;
        width: formatPx(110);
        margin-right: formatPx(35);
        font-size: formatPx(35);
        color: #feb9af;
        text-align: center;
        padding: formatPx(20) 0;

        &.select {
          color: #ffffff;
        }

        &:last-child {
          margin-right: formatPx(2);
        }

        .search-times-view-status {
          font-size: formatPx(30);
        }
      }
    }
  }

</style>
